﻿<template>
  <div>
    <!-- 表格 -->
    <template v-if = "element && element.key && element.type == 'table'">
      <div class = 'page_tableContent dynamic_single ' style = 'margin-bottom:20px;' :class = "{active: selectWidget.key == element.key}" @click.stop = "handleSelectWidget(index)">
        <el-table :data = 'element.tableData' :style = "{width: element.options.width}" :stripe = 'element.options.stripe' :border = 'element.options.border'>
          <el-table-column align = 'center' v-for = '(tableItem) in element.tableColumn' :key = 'tableItem.indexName' :label = 'tableItem.text'>
            <template slot-scope = 'scope'>
              <span>{{scope.row[tableItem.indexName]}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class = 'dynamic_singleBtns'>
          <el-button title = "删除" @click.stop = "handleWidgetDelete(index)" v-if = "selectWidget.key == element.key" type = "danger" size = 'mini' round>
            <i class = "iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </div>
    </template>
    <!-- ListBoxTable -->
    <template v-else-if = "element && element.key && element.type == 'listBoxTable'">
      <div class = 'page_tableContent dynamic_single ' style = 'margin-bottom:20px;' :class = "{active: selectWidget.key == element.key}" @click.stop = "handleSelectWidget(index)">
        <list-box-table :myConfig="element.options" :ref="element.key"></list-box-table>
        <div class = 'dynamic_singleBtns'>
          <el-button title = "删除" @click.stop = "handleWidgetDelete(index)" v-if = "selectWidget.key == element.key" type = "danger" size = 'mini' round>
            <i class = "iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </div>
    </template>
    <!-- 页码 -->
    <template v-else-if = "element && element.key && element.type == 'pagination'">
      <div class = 'dynamic_single' :class = "{active: selectWidget.key == element.key}" @click.stop = "handleSelectWidget(index)">
        <el-pagination
          background
          :current-page.sync = "element.options.currentPage"
          :page-size = 'element.options.pageSize'
          :pager-count = "5"
          :page-sizes = "[10, 25, 50, 100]"
          layout = "total, sizes, prev, pager, next"
          :total = 'element.options.totalLength'>
        </el-pagination>
        <div class = 'dynamic_singleBtns'>
          <el-button title = "删除" @click.stop = "handleWidgetDelete(index)" v-if = "selectWidget.key == element.key" type = "danger" size = 'mini' round>
            <i class = "iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </div>
    </template>
    <!-- 按钮 -->
    <template v-else-if = "element && element.key && element.type == 'bottomButton'">
      <div class = 'dynamic_single' :class = "{active: selectWidget.key == element.key}" @click.stop = "handleSelectWidget(index)">
        <div :style = "{'text-align': Object.keys(element.options).indexOf('textAlign') !== -1 ? element.options.textAlign : 'left'}">
          <el-button :type = "element.options.type" :disabled = "element.options.disabled">{{element.name}}</el-button>
        </div>
        <div class = 'dynamic_singleBtns'>
          <el-button title = "删除" @click.stop = "handleWidgetDelete(index)" v-if = "selectWidget.key == element.key" type = "danger" size = 'mini' round>
            <i class="iconfont icon-shanchu"></i>
          </el-button>
          <el-button title = "复制" @click.stop = "handleWidgetClone(index)" v-if = "selectWidget.key == element.key" type = "primary" size = 'mini' round>
            <i class="iconfont icon-fuzhi"></i>
          </el-button>
        </div>
      </div>
    </template>

    <el-form-item class="dynamic_single" v-else
    :class = "{active: selectWidget.key == element.key, 'dynamic_singleRequired': element.options.required, form_noLeftMargin: (element.type === 'button' || !element.options.showLabel)}"
    :label = "(element.type === 'button' || !element.options.showLabel) ? '' : element.name"
    @click.native.stop = "handleSelectWidget(index)">
      <template v-if = "element.type == 'input'">
        <el-input v-model = "element.options.defaultValue" :style = "{width: element.options.width}" :placeholder = "element.options.placeholder"
        :clearable = "element.options.clearable" :disabled = "element.options.disabled"
        :maxlength = "(Object.keys(element.options).indexOf('maxLength') !== -1 && element.options.maxLength > 0) ? element.options.maxLength : Infinity"
        :show-word-limit = "(Object.keys(element.options).indexOf('maxLength') !== -1 && element.options.maxLength > 0) ? true : false">
          <el-button slot = "append"
            v-if = "Object.keys(element.options).indexOf('linkageOption') !== -1 && element.options.linkageOption.isLinkage && element.options.linkageOption.linkageType === 'eventRender'">
            <i class= 'iconfont icon-zidingyi'></i>
          </el-button>
        </el-input>
      </template>

      <template v-if = "element.type == 'textarea'">
        <el-input type = "textarea" v-model = "element.options.defaultValue"
        :style = "{width: element.options.width}"
        :disabled = "element.options.disabled"
        :placeholder = "element.options.placeholder"
        :clearable = "element.options.clearable"
        :autosize = "element.options.autosize"
        :maxlength = "(Object.keys(element.options).indexOf('maxLength') !== -1 && element.options.maxLength > 0) ? element.options.maxLength : Infinity"
        :show-word-limit = "(Object.keys(element.options).indexOf('maxLength') !== -1 && element.options.maxLength > 0) ? true : false"
        ></el-input>
      </template>

      <template v-if = "element.type == 'select'">
        <el-select
        v-model = "element.options.defaultValue"
        :disabled = "element.options.disabled"
        :multiple = "element.options.multiple"
        :clearable = "element.options.clearable"
        :placeholder = "element.options.placeholder"
        :filterable = "element.options.filterable"
        :style = "{width: element.options.width}">
          <el-option v-for = "item in element.options.options" :key = "item.value" :value = "item.value" :label = "item.label"></el-option>
        </el-select>
      </template>

      <template v-if = "element.type == 'number'">
        <el-input-number
          v-model = "element.options.defaultValue"
          :disabled = "element.options.disabled" :class = "element.options.controlsShow ? '' : 'inputNumber_noControls'"
          :min = "element.options.min === null ? -Infinity : element.options.min" :max = "element.options.max === null ? Infinity : element.options.max" :precision = "element.options.precision"
          :controls-position = "element.options.controlsPosition" :controls = 'element.options.controlsShow'
          :style = "{width: element.options.width}"
        ></el-input-number>
      </template>

      <template v-if = "element.type == 'radio'">
        <el-radio-group v-model = "element.options.defaultValue" :style = "{width: element.options.width}" :disabled = "element.options.disabled">
          <el-radio
            :style = "{display: element.options.inline ? 'inline-block' : 'block'}"
            :label = "item.value" v-for = "(item, index) in element.options.options" :key = "item.value + index"
          >{{item.label}}</el-radio>
        </el-radio-group>
      </template>
      <template v-if = "element.type == 'checkbox'">
        <el-checkbox-group v-model = "element.options.defaultValue" :style = "{width: element.options.width}" :disabled = "element.options.disabled">
          <el-checkbox
            :style = "{display: element.options.inline ? 'inline-block' : 'block'}"
            :label = "item.value" v-for = "(item, index) in element.options.options" :key = "item.value + index"
          >{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </template>

      <template v-if = "element.type == 'time'">
        <el-time-picker
        v-model = "element.options.defaultValue"
        :is-range = "element.options.isRange"
        :placeholder = "element.options.placeholder"
        :start-placeholder = "element.options.startPlaceholder"
        :end-placeholder = "element.options.endPlaceholder"
        :disabled = "element.options.disabled"
        :editable = "element.options.editable"
        :clearable = "element.options.clearable"
        :range-separator = "element.options.rangeSeparator"
        :style = "{width: element.options.width}"
        ></el-time-picker>
      </template>

      <template v-if = "element.type == 'date'">
        <el-date-picker
        v-model = "element.options.defaultValue"
        :type = "element.options.type"
        :is-range = "element.options.isRange"
        :placeholder = "element.options.placeholder"
        :start-placeholder = "element.options.startPlaceholder"
        :end-placeholder = "element.options.endPlaceholder"
        :disabled = "element.options.disabled"
        :editable = "element.options.editable"
        :clearable = "element.options.clearable"
        :range-separator = "element.options.rangeSeparator"
        :format = "element.options.format"
        :style = "{width: element.options.width}"
        ></el-date-picker>
      </template>

      <template v-if = "element.type == 'rate'">
        <el-rate v-model = "element.options.defaultValue"
        :max = "element.options.max"
        :disabled = "element.options.disabled"
        :allow-half = "element.options.allowHalf"
        :show-score = "element.options.showScore"
        ></el-rate>
      </template>

      <template v-if = "element.type == 'color'">
        <el-color-picker v-model = "element.options.defaultValue" :disabled = "element.options.disabled" :show-alpha = "element.options.showAlpha"></el-color-picker>
      </template>

      <template v-if = "element.type=='switch'">
        <el-switch v-model = "element.options.defaultValue" :disabled = "element.options.disabled"></el-switch>
      </template>

      <template v-if = "element.type=='slider'">
        <el-slider v-model = "element.options.defaultValue" :min = "element.options.min" :max = "element.options.max" :disabled = "element.options.disabled" :step = "element.options.step"
        :show-input = "element.options.showInput" :range = "element.options.range" :style = "{width: element.options.width}"></el-slider>
      </template>

      <template v-if = "element.type=='JSONEditor' || element.type=='MD' || element.type=='RichText' || element.type == 'MapXY' || element.type == 'PicXY'">
        <el-input v-model = "element.options.defaultValue" placeholder = '点击输入内容'
        :disabled = 'element.options.disabled'></el-input>
      </template>

      <template v-if = "element.type == 'imgupload'">
        <el-upload action = '#' disabled drag>
          <i class = "el-icon-upload"></i>
          <div class = "el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </template>

      <template v-if = "element.type == 'video'">
        <el-upload action = '#' disabled drag>
          <i class = "el-icon-upload"></i>
          <div class = "el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </template>

      <template v-if = "element.type == 'cascader'">
        <el-cascader v-model = "element.options.defaultValue" :disabled = "element.options.disabled" :clearable = "element.options.clearable" :placeholder = "element.options.placeholder"
        :style = "{width: element.options.width}" :options = "element.options.remoteOptions"></el-cascader>
      </template>

      <template v-if = "element.type == 'button'">
        <el-button :disabled = "element.options.disabled" :type = "element.options.type">{{element.name}}</el-button>
      </template>

      <!-- 可编辑的表格 -->
      <template v-if = "element.type == 'editTable'">
        <div class = "addColumn" v-if = "Object.keys(element.options).indexOf('showAdd') === -1 ? !element.options.disabled : element.options.showAdd">
          <p> <i class = "iconfont icon-add"></i>添加数据</p>
        </div>
        <el-table :data = 'element.tableData' :style = "{width: element.options.width}" :stripe = 'element.options.stripe' :border = 'element.options.border'>
          <el-table-column align = 'center' v-for = '(tableItem) in element.tableColumn' :key = 'tableItem.indexName' :label = 'tableItem.text'>
            <template slot-scope = 'scope'>
              <span>{{scope.row[tableItem.indexName]}}</span>
            </template>
          </el-table-column>
          <el-table-column align = 'center' v-if = "Object.keys(element.options).indexOf('showAdd') === -1 ? !element.options.disabled : element.options.showAdd" label = '操作'>
            <template slot-scope = 'scope'>
              <el-button type = 'text'>
                <span><i class = 'iconfont icon-shanchu'></i>删除</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class = 'dynamic_singleBtns'>
        <el-button title = "删除" @click.stop = "handleWidgetDelete(index)" v-if = "selectWidget.key == element.key" type = "danger" size = 'mini' round>
          <i class = "iconfont icon-shanchu"></i>
        </el-button>
        <el-button title = "复制" @click.stop = "handleWidgetClone(index)" v-if = "selectWidget.key == element.key && element.type !== 'editTable'" type = "primary" size = 'mini' round>
          <i class = "iconfont icon-fuzhi"></i>
        </el-button>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import ListBoxTable from '@/components/common/ListBoxTable.vue'
export default {
  components: {ListBoxTable},
  props: ['element', 'select', 'index', 'data'],
  data () {
    return {
      selectWidget: this.select
    }
  },
  methods: {
    // 选择的单个元素时
    handleSelectWidget (index) {
      this.selectWidget = this.data.list[index]
      console.log(this.$refs[this.selectWidget.key])
    },
    // 删除时
    handleWidgetDelete (index) {
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = {}
        } else {
          this.selectWidget = this.data.list[index - 1]
        }
      } else {
        this.selectWidget = this.data.list[index + 1]
      }
      this.$nextTick(() => {
        this.data.list.splice(index, 1)
      })
    },
    // 复制时
    handleWidgetClone (index) {
      let cloneData = {
        ...this.data.list[index],
        options: {...this.data.list[index].options},
        key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
      }
      if (this.data.list[index].type === 'radio' || this.data.list[index].type === 'checkbox') {
        cloneData = {
          ...cloneData,
          options: {
            ...cloneData.options,
            options: cloneData.options.options.map(item => ({...item}))
          }
        }
      }
      this.data.list.splice(index, 0, cloneData)
      this.$nextTick(() => {
        this.selectWidget = this.data.list[index + 1]
      })
    }
  },
  watch: {
    select (val) {
      this.selectWidget = val
    },
    selectWidget: {
      handler (val) {
        this.$emit('update:select', val)
      },
      deep: true
    }
  }
}
</script>
